<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="x-dns-prefetch-control" content="on"/>
    <title>{{ sitesettings.website_name }}</title>
    <style>
        .highcharts-credits {
            display: none;
        }
        tspan, text {
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>

<div id="sta_age_bar" class="chartsdiv"
     style="width: 65%;height: 600px;margin: 20px auto 0;padding-right: 3%;min-width: 780px"></div>

<script src="{{ STATIC_URL }}opensource/amazeui-2.5.2/js/jquery.min.js"></script>
<script src="{{ STATIC_URL }}opensource/highstock-5.0.2/highstock.js"></script>

<script>
    //获取url参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return "";
    }
    var region = getQueryString("region");
    var nic = getQueryString("nic");
    var regionText = getQueryString("regionText");
    var nicText = getQueryString("nicText");
    if (regionText != "" || nicText != "") {
        var charttext = '在营企业年龄结构  -' + "  " + regionText + "  " + nicText;
    } else {
        charttext = '在营企业年龄结构';
    }
    ajaxchart(region, nic);
    function ajaxchart(region, nic) {
        $.ajax({
            type: 'POST',
            url: '/saas/statistics_histogram/',
            data: {
                region: region,
                nic: nic
            },
            success: function (data) {
                agechart(data);
            }
        })
    }
    function agechart(data) {
        $('#sta_age_bar').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: charttext
            },
            tooltip: {
                formatter: function () {
                    if (this.x < 30) {
                        var n = this.x + 1;
                        return this.x + "-" + n + "年" + "<br/>" + '<span style="color:#7cb5ec;">\u25CF </span>' + this.y;
                    }
                    else {
                        return this.x + "年以上" + "<br/>" + '<span style="color:#7cb5ec;">\u25CF </span>' + this.y;
                    }
                }
            },
            xAxis: {
                gridLineWidth: 1,
                min: 0,
                title: {
                    text: '年',
                    margin: -17,
                    align: 'high'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },
            yAxis: [{
                min: 0,
                title: {
                    text: '企业数量（个）'
                }
            }],
            plotOptions: {
                series: {
                    events: {
                        legendItemClick: function (e) {
                            changelenged("sta_age_bar");
                        }
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: '企业',
                type: 'column',
                data: JSON.parse(data.ent),
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'between'
            }, {
                name: '个体户',
                type: 'column',
                data: JSON.parse(data.geti),
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'between',
                visible: false
            }]
        });
    }
    function changelenged(id) {
        var chart = $('#' + id).highcharts();
        var seri = chart.series;
        $(seri).each(function () {
            this.setVisible(false, false);
        });
        chart.redraw();
    }
</script>
</body>
</html>
